<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css">
    <style>
        .box-card {margin: 100px auto; width: 300px; }
        [v-cloak] {display: none;}
    </style>
</head>
<body>
<div id="app" v-cloak>
     <el-card class="box-card">
        <div slot="header" class="clearfix">
            <img src="static/logo.png" width="180" style="display: block; margin: auto;">
        </div>
        <el-form ref="form" :model="form.login">
            <el-form-item>
                <el-input prefix-icon="el-icon-mobile" v-model="form.login.mobile" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input prefix-icon="el-icon-lock" v-model="form.login.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit" :disabled="!form.login.mobile || !form.login.password" style="width: 100%">登录</el-button>
                <el-alert :title="form.errorMsg" type="error" v-if="form.errorMsg" :closable="false"></el-alert>
            </el-form-item>
            <el-form-item>
                <div style="text-align: center">
                    还没账号？<a href="register.html">立即注册</a>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="/static/global.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                login: {},
                errorMsg: null
            }
        },
        methods: {
            submit: function (e) {
                let vue = this;

                //构造请求参数
                let body = new FormData();
                for (let prop in vue.form.login) {
                    body.append(prop, vue.form.login[prop]);
                }

                axios.post('/login', body).then(resp => {
                    window.location.href = '/user/account.html';
                });
            }
        }
    });
</script>
</html>